import { useEffect } from 'react'
import { AliveScope } from 'react-activation'
import { useAppConfig } from '@/stores'
import MainPage from './main-page'
import SecondPage from './second-page'
import LoginPage from './login-page'
import NoAuthPage from './system-page/no-auth-page'
import NotFoundPage from './system-page/not-found-page'
import { useTranslation } from 'react-i18next'
import { languageValueList } from '@/locale/language'

import './index.less'

const Layout = (props: any) => {

  const { i18n } = useTranslation()
  const { appConfig } = useAppConfig()

  const { layoutApply } = props

  useEffect(() => {
    if (appConfig.theme) {
      document.body.setAttribute('class', appConfig.theme)
    }
  }, [appConfig.theme])

  useEffect(() => {
    document.documentElement.setAttribute('data-prefers-color-scheme', appConfig.darkMode ? 'dark' : 'light')
  }, [appConfig.darkMode])

  useEffect(() => {
    if (appConfig.language) {
      i18n.changeLanguage(appConfig.language)
    } else {
      i18n.changeLanguage(languageValueList[0])
    }
  }, [appConfig.language])

  /**
   * 检查用户权限
   */
  // const checkUserAuth = () => {

  // }

  const renderLayout = () => {
    switch (layoutApply) {
      case 'mainPage':
        return <MainPage />
      case 'secondPage':
        return <SecondPage />
      case 'loginPage':
        return <LoginPage />
      case 'noAuthPage':
        return <NoAuthPage />
      case 'notFoundPage':
        return <NotFoundPage />
      default:
        return <MainPage />
    }
  }

  return <div className={'layout'} key={i18n.language}>
    <AliveScope>
      {renderLayout()}
    </AliveScope>
  </div>
}

export default Layout
